<html>
<head>
<title>ComboBox example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.ComboBox');

	function init() {
		
		var comboBox = new core.ui.ComboBox();
		comboBox.setEditable(true);
		
		// Add items to the combobox menu
		var values = { 1 : 'One', 2 : 'Two', 3 : 'Three', 4 : 'Four', 5 : 'Five', 6 : 'Six', 7 : 'Seven', 8 : 'Eight', 9 : 'Nine', 10 : 'Ten' };
		for (var k in values) comboBox.addItem(values[k], k, (1 == k));
		
		// Add value change handler
		comboBox.addChangeListener({
			onValueChanged : function(sender) {
				document.getElementById('value').innerHTML = 'Value changed to: ' + sender.getValue() + '.';
			}
		});
		
		comboBox.center();
		comboBox.show();
	}
	
</script>
<style type="text/css">
	
	.ComboBox {
		width: 200px;
	}
	
</style>
</head>

<body onload="init()">
<span id="value"></span>
</body>
</html>